<template>
  <s-page custom-class="Grid-Page">
    <view class="container">
      <c-demo-block title="基础用法">
        <s-grid>
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
        </s-grid>
      </c-demo-block>

      <c-demo-block title="自定义列数">
        <s-grid :column="3">
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
        </s-grid>
      </c-demo-block>

      <c-demo-block title="格子间距">
        <s-grid :gutter="30">
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
        </s-grid>
      </c-demo-block>

      <c-demo-block title="正方形格子">
        <s-grid square>
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
        </s-grid>
      </c-demo-block>

      <c-demo-block title="内容横排">
        <s-grid :column="3" direction="horizontal">
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
        </s-grid>
      </c-demo-block>

      <c-demo-block title="徽标提示">
        <s-grid :column="2">
          <s-grid-item icon="home-o" text="文字" dot />
          <s-grid-item icon="search" text="文字" badge="99+" />
        </s-grid>
      </c-demo-block>

      <c-demo-block title="不显示边框">
        <s-grid :column="3" :border="false">
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
        </s-grid>
      </c-demo-block>

      <c-demo-block title="边框颜色">
        <s-grid :column="3" border-color="red">
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
          <s-grid-item icon="photo-o" text="文字" />
        </s-grid>
      </c-demo-block>
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
  }),
  methods: {},
  onLoad() { },
};
</script>

<style lang="scss">
.Grid-Page {
  ::v-deep {
    .c-demo-block {
      &__title {
        padding-left: $padding-md;
      }
    }
  }
}
</style>
